<script setup lang='ts'>
  import { onMounted, reactive, ref } from 'vue';
  import request from '@/api/index';
  import { getAssetsFile, xmloading, tpreventoftenFun } from '@/utils/public';
  import portraitImg from '@/components/portrait.vue';
  import shop from '@/components/shop/index.vue';
  import ticketLogList from './ticketLogList.vue';
  const shopRef = ref(),
  ticketLogListRef = ref()
  const action = reactive({
    webUrl:'',
    banner_list:[] as Array<any>
  })
  const userinfo = reactive({
    name:'',
    ticket:0,
    jd_balance:0,
    diamond_balance:0,
    img:'',
  })
  const handleIntegral = (key:number = 0)=>{
    if(key == 1) {
      shopRef.value.openDialog()
    }
    if(key == 2) {
      (kk as any).pay()
    }
    if(key == 3) {
      ticketLogListRef.value.openDilaog()
    }
  }
  const handleFlushed = tpreventoftenFun(()=>{
    getTicketInfo()
  },1500)
  const openInnerWeb = tpreventoftenFun((item:any = {})=>{
    const { url='' } = item
    let data = {
      code: 100009,
      action:url.indexOf('kkaudio') > -1 ? url : `kkaudio://innerWeb?type=4&url=${ import.meta.env.VITE_WEbHTTP + url}?webType=innerWeb`,
    };
    (kk as any).goCommon(data);
  },1000)
  const getTicketInfo = async()=>{
    const loading = xmloading()
    const res = await request.getUserTicket()
    loading.close()
    const { banner_list=[], userWaltInfo = {} } = res.data,
    { name='', ticket=0, jd_balance=0, diamond_balance=0, img='' } = userWaltInfo
    action.banner_list = banner_list
    Object.assign(userinfo,{
      name,
      ticket,
      jd_balance,
      diamond_balance,
      img,
    })
  }
  onMounted(() => {
    getTicketInfo()
  })
</script>

<template>
  <div class="ticketBox">
    <div class="userinfo">
      <div class="flex-align">
        <portraitImg :image="userinfo.img" />
        <div>
          <div class="nickName">{{ userinfo.name }}</div>
          <div class="flex-align">
            <!-- <div @click="handleIntegral(1)" class="integral">
              <xmimg src="icon4.png" class="iconImg" />
              <span>{{ userinfo.jd_balance }}</span>
            </div> -->
            <div @click="handleIntegral(2)" class="integral">
              <xmimg src="icon1.png" class="iconImg" />
              <span>{{ userinfo.diamond_balance }}</span>
            </div>
            <div @click="handleIntegral(3)" class="integral">
              <xmimg src="icon3.png" class="iconImg" />
              <span>{{ userinfo.ticket }}</span>
            </div>
          </div>
        </div>
      </div>
      <xmimg @click="handleFlushed" src="ticket/butimg.png" class="flushed" />
    </div>
    <xmimg src="ticket/titleimg.png" class="ticketTips" />
    <div class="bannerList">
      <dl v-for="item in action.banner_list">
        <dt>活动期间此游戏已下发{{ item.today_count }}人气票至您的背包中</dt>
        <dd @click="openInnerWeb(item)">
          <xmimg :src="item.img" />
        </dd>
      </dl>
    </div>
    <!-- <shop ref="shopRef"/> -->
    <ticketLogList ref="ticketLogListRef" />
  </div>
</template>

<style lang='scss' scoped>
  .ticketBox {
    width: 100vw;
    min-height: 100vh;
    background: var(--ticketPageBackColor);
    padding: 20px 8px 40px;
    box-sizing: border-box;
    .userinfo {
      position: relative;
      width: 100%;
      height: 80px;
      padding: 10px 0 10px 20px;
      box-sizing: border-box;
      background: var(--ticketUserinfoBack);
      .portrait {
        width: 60px;
        width: 60px;
        margin-right: 14px;
      }
      .nickName {
        color: #fff;
        font-size: 18px;
        font-weight: 500;
        margin-bottom: 10px;
      }
      .integral {
        display: flex;
        align-items: center;
        .iconImg {
          width: 20px;
          height: 20px;
          margin-right: 4px;
        }
        span {
          color: #fff;
          font-size: 14px;
          font-weight: 400;
        }
      }
      .integral:nth-child(2) {
        margin: 0 8px;
      }
      .flushed {
        position: absolute;
        top: 0;
        right: 0;
        width: 62px;
        height: 28px;
      }
    }
    .ticketTips {
      width: 230px;
      height: 76px;
      margin: 36px auto 12px;
    }
    .bannerList {
      padding: 0 8px;
      dl {
        width: 100%;
        margin-top: 20px;
        dt {
          width: 100%;
          height: 24px;
          line-height: 24px;
          color: var(--ticketTitleFontColor); 
          font-size: 12px;
          font-weight: 400;
          text-align: center;
          margin-bottom: 4px;
          background: var(--ticketTitleBackColor);
        }
        dd {
          img {
            width: 100%;
            height: 93px;
          }
        }
      }
      dl:nth-child(1) {
        margin-top: 0;
      }
    }
    .iframeActivity {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
    }
  }
</style>